<template>
  <div class="workbench-wrapper">
    <container-box :metaTitle="routeMeta.title || ''">
      <div slot="container" >
         <div class="compactDetail">
         <div class="tbBox">
            <mds-tabs v-model="active" class="tbPosition">
                <mds-tabs-pane
tab="账户信息"
                        :index="1">
                        <div class="cardOne">
                            <div class="header">
                                <span class="textBox">单列卡片</span>
                            </div>
                            <compactCard :formData="formData" />
                        </div>
                        <div class="cardTwo">
                            <div class="header">
                                <span class="textBox">两列卡片</span>
                            </div>
                            <div class="twoCardBox">
                                <compactCard :formData="formData" />
                                <compactCard :formData="twoCardformData" />
                            </div>
                        </div>
                        </mds-tabs-pane>
                <mds-tabs-pane
tab="分类信息"
                        :index="2"></mds-tabs-pane>
                <mds-tabs-pane
tab="分类信息"
                        :index="3"></mds-tabs-pane>
            </mds-tabs>
        </div>

    </div>
      </div>
      <mds-card slot="info" class="mds-card" style="width: 280px" :loading="true">
        <div slot="header">
          <span>{{ routeMeta.title || '' }}</span>
        </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
      </mds-card>
    </container-box>
  </div>
</template>

<script>
import ContainerBox from '@/components/ContainerBox'
import compactCard from '@/components/baseDetail/CompactDetailCard'

export default {
  data() {
    return {
      active: 1,
      formData: [{
        label: '账户名称：',
        value: '5461 5461 5616 5656 133  ',
        color: '',
        pop: '100%',
        flag: false
      }, {
        label: '所属银行：',
        value: '中国银行',
        color: '',
        pop: '100%',
        flag: false
      }, {
        label: '金融机构编码：',
        value: 'ABCD666     ',
        color: '',
        pop: '100%',
        flag: false
      }, {
        label: '是否单一币种：',
        value: '是',
        color: '',
        pop: '100%',
        flag: false
      }, {
        label: '货币币种：',
        value: '人民币',
        color: '',
        pop: '100%',
        flag: false
      }, {
        label: '身份证正面：',
        value: '境内',
        color: '',
        img_list: ['../../assets/上传之后的图片备份.png'],
        pop: '100%',
        flag: true
      }],
      twoCardformData: [{
        label: '账户名称：',
        value: '5461 5461 5616 5656 133  ',
        color: '',
        pop: '100%',
        flag: false
      }, {
        label: '所属银行：',
        value: '中国银行',
        color: '',
        pop: '100%',
        flag: false
      }, {
        label: '金融机构编码：',
        value: 'ABCD666     ',
        color: '',
        pop: '100%',
        flag: false
      }, {
        label: '是否单一币种：',
        value: '是',
        color: '',
        pop: '100%',
        flag: false
      }, {
        label: '货币币种：',
        value: '人民币',
        color: '',
        pop: '100%',
        flag: false
      }, {
        label: '身份证正面：',
        value: '境内',
        color: '',
        img_list: [1, 2, 3, 4, 5, 6, 7, 8],
        height: '80px',
        width: '80px',
        pop: '100%',
        flag: true
      }]
    }
  },
  components: {
    ContainerBox,
    compactCard
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  }
}
</script>
<style lang="scss">
    .compactDetail{
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        .tbPosition{
            //todo 组件本身是否有靠右的属性
            .mds-tabs-bar{
              display: flex;
              justify-content: flex-start;
            }
           .mds-tabs-content{
             background: white;
           }
            .cardOne{
                margin: 26px;
                border:1px solid rgba(240,242,245,1);
                .header{
                    display: flex;
                    justify-content: flex-start;
                    flex-direction: row;
                    align-items: center;
                    background:rgba(250,250,253,1);
                    .textBox{
                        font-size:14px;
                        font-family:PingFangSC-Medium,PingFang SC;
                        font-weight:500;
                        color:rgba(53,64,82,1);
                        line-height:22px;
                        padding: 13px 0 13px 23px;
                    }

                }
            }
            .cardTwo{
                margin: 26px;
                border:1px solid rgba(240,242,245,1);
                .header{
                    display: flex;
                    justify-content: flex-start;
                    flex-direction: row;
                    align-items: center;
                    background:rgba(250,250,253,1);
                    .textBox{
                        font-size:14px;
                        font-family:PingFangSC-Medium,PingFang SC;
                        font-weight:500;
                        color:rgba(53,64,82,1);
                        line-height:22px;
                        padding: 13px 0 13px 23px;
                    }

                }
                .twoCardBox{
                    display: flex;
                  justify-content: center;
                  flex-direction: row;
                }
            }
        }
    }
</style>
